<template>
  <!-- 头部 -->
  <a-alert type="info" style="height: 50px;" banner :show-icon="false">
    <template #message>
      <div class="flex">
        <span style="font-size: 20px;line-height: 50px;">
        退款审核 | 工单：20925
      </span>
        <div>
          <a-button type="text" style="margin-left: 10px;">sku明细</a-button>
          <a-button type="text" style="margin-left: 10px;">流程图示</a-button>
          <a-button type="text" style="margin-left: 10px;">流程日志</a-button>
          <a-button type="text" style="margin-left: 10px;">刷新</a-button>
          <a-button type="text" style="margin-left: 10px;">工单主数据</a-button>
        </div>
      </div>
    </template>
  </a-alert>
  <!-- 内容 -->
  <div style="display: flex;margin-top:20px;">
  <!--  左侧  -->
    <div style="padding: 0 30px 20px 30px">
      <div class="circle" v-for="item in circleList">
        <span class="text">{{item}}</span>
      </div>
    </div>
  <!-- 分割线 -->
    <a-divider type="vertical" :style="{height: height, backgroundColor: '#7cb305'}" />
  </div>
</template>
<script setup>
import {ref,watch} from "vue";
const color = ref(localStorage.getItem("color"))
const circleList = ref(["123","456","789","101112"])
const height = ref(circleList.value.length * 120 + "px")
watch(color, (newVal) => {
  console.log("color changed to " + newVal)
})
</script>
<style scoped>
.ant-alert{
  padding: 0;
}
.flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #8e8c8c;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.text{
  font-size: 14px;
  color: #fff;
}
</style>
